<script setup>
import { computed } from 'vue'

const props = defineProps({
  kind: {
    type: String,
    required: true,
    default: 'info'
  },
  txt: {
    type: String,
    required: true,
    default: '这是一条没的内容的提示'
  }
})

const icon = computed(() => {
  if(props.kind === 'success') {
    return '&#xe654;'
  } else if(props.kind === 'info') {
    return '&#xe6b6;'
  } else if(props.kind === 'warn') {
    return '&#xe671;'
  } else if(props.kind === 'error') {
    return '&#xe71f;'
  }
})
</script>

<template>
  <transition name="fade-ud" appear>
    <div class="msg-a">
      <div :class="['msg-b', props.kind]"><i class="iconfont" v-html="icon" /> <span class="msg-c">{{props.txt}}</span></div>
    </div>
  </transition>
</template>

<style scoped>
.success {background-color: #daf0e4; color: #18a058; font-size: 18px;}
.info {background-color: #f4f5f5; color: #333333; font-size: 18px;}
.warn {background-color: #fdf0db; color: #f0a020; font-size: 16px;}
.error {background-color: #f7dee3; color: #d03050; font-size: 18px;}
.msg-a {width: 100%; position: fixed; top: 10px; z-index: 10; display: flex; display: -webkit-flex; flex-direction: column; align-items: center;}
.msg-b {padding: 10px 20px; border-radius: 5px; box-shadow: 1px 1px 5px #CCC;}
.msg-c {font-size: 16px; padding-left: 5px;}
</style>
